<template>
  <div class="second-nav">
    <div class="nav-title">
      <span>{{subTitle}}</span>
    </div>
    <div class="nav-i-b" :class="{'nav-i-b-f':!show}" @click="hideSecond">
        <svg-icon className="nav-icon" icon-class="caidan_shousuo"/>
    </div>
    <div class="scroll-box">
      <div id="nav-list" class="nav-list">
        <ul>
          <li v-for="(item, index) in secondMenuList" :key="index">
            <div v-if="!item.child && !item.hideInMenu" class="item" :class="{'active-item':item.name == showName}" @click="handleNav(item)"><span>{{item.title}}</span></div>
            <div
              v-if="item.child && item.child.length" 
              class="item item-parent"
              @click.stop="handleClick"
              :class="{'show-child':(!isNaN(showIndex) ? showIndex == index : false)}"
            >
              <span>{{item.title}}</span>
            </div>
            <div v-show="!isNaN(showIndex) ? showIndex == index : false">
              <ul v-if="item.child && item.child.length">
                <li v-for="(obj, key) in item.child" :key="key">
                  <div v-if="!obj.hideInMenu" class="item child-item" :class="{'active-item':obj.name == showName}"  @click="handleNav(obj)"><span>{{obj.title}}</span></div>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
export default {
  props: ['show','navNum'],
  data() {
    return {
      showList: [],
    }
  },
  computed: {
    ...mapState({
      showIndex: state => state.breadCrunbData.groupIndex>=0 ? state.breadCrunbData.groupIndex : null,
      showName: state => state.breadCrunbData.showName || state.breadCrunbData.name,
      subTitle: state => state.menuList[state.breadCrunbData.pIndex] && state.menuList[state.breadCrunbData.pIndex].secondMenuTitle
    }),
    ...mapGetters([
      'secondMenuList'
    ])
  },
  mounted() {
  },
  methods: {
    handleClick(e){
      console.dir(e.target.nodeName)
      let itemDom = e.target
      let lastDom = null
      if (e.target.nodeName == 'SPAN') {
        itemDom = e.target.parentElement
      }
      lastDom = itemDom.nextElementSibling
      let className = itemDom.className.split(' ')
      if (lastDom.style.display != 'none') {
        lastDom.style.display = 'none'
        if (className.indexOf('show-child')>-1) {
          className.splice(className.indexOf('show-child'),1)
        }
      } else {
        lastDom.style.display = 'block'
        if (className.indexOf('show-child') == -1) {
          className.push('show-child')
        }
      }
      itemDom.className = className.join(' ')
    },
    hideSecond() {
      this.$emit('hideSecond')
    },
    handleNav(item) {
      this.$router.push(item.path)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/base.scss';
.second-nav {
  height: 100%;
  width: 100%;
  background: #fff;
  border-radius:0px 5px 5px 0px;
  overflow: hidden;
  padding-top: 64px;
  box-sizing: border-box;
  position: relative;
  .scroll-box {
    width: 240px;
    overflow-y: auto;
    position: absolute;
    top: 64px;
    left: 0;
    bottom: 0;
    
  }
  .nav-title {
    height: 64px;
    position: absolute;
    top: 0;
    left: 0;
    width: 190px;
    line-height: 64px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    border-bottom: 1px solid #F0F0F0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .nav-list {
    width: 190px;
  }
  .item {
    user-select: none;
    line-height: 48px;
    height: 48px;
    cursor: pointer;
    display: flex;
    font-weight: bold;
    font-size: 14px;
    color: #333;
    // justify-content: center;
    padding-left: 28px;
    align-items: center;
    &:hover {
      color: $themeColor;
    }
    
  }
  .child-item {
    font-weight: normal;
    padding-left: 63px;
  }
  .active-item {
    color: $themeColor;
    background: #ffe7e7;
    position: relative;
    &:after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 3px;
      height: 100%;
      background: #F4222D;
    }
  }
  .item-parent {
    position: relative;
    &:hover {
      color: #666;
      background: #f5f5f5;
    }
    &:after {
      content: '';
      width: 6px;
      height: 6px;
      border-left: 1px solid #333;
      border-top: 1px solid #333;
      transform: translateY(-50%) rotate(135deg);
      position: absolute;
      top: 50%;
      right: 16px;
    }
  }
  .show-child {
    &:after {
      transform: translateY(-4px) rotate(-135deg);
    }
  }
  .nav-i-b {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: fixed;
    top: 94px;
    left: 160px;
    z-index: 1;
    transition: .3s;
  }
  .nav-i-b-f {
    width: 54px;
    height: 54px;
    background: #fff;
    box-shadow: 0 5px 13px 0 rgba(37,36,36,.1);
    border-radius: 0 4px 4px 0;
    top: 77px;
    left: 0;
    .nav-icon {
      transform: translateX(-50%) translateY(-50%) rotate(0deg);
    }
  }
  .nav-icon {
    position: absolute;
    top: 50%;
    transition: all .1s;
    left: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(180deg);
    font-size: 20px;
  }
}
</style>